<template>
  <view class="parkCarMm">
    <view class="top-part">
      <view class="title">请输入车牌号</view>
      <view class="license" @tap="openKeyBoard">
        <view v-for="(item, index) in code" :key="index" class="edit_text">
          <view v-if="7 == index && !item.value" style="font-size:18rpx;color: #9a9a99;">新能源</view>
          <view v-else>{{ item.value }}</view>
          <view v-if="currentFocus == index && isFocus" class="cursor" />
        </view>
      </view>
      <view v-if="mycarList.length > 0" class="queit_box">
        <view v-for="(item, index) in mycarList" :key="index" class="queit">
          <view class="plantno" @tap="plant(item)">{{ item }}</view>
          <view class="iconfont .icon-delete-filling" @tap="closeTip(item)" />
        </view>
      </view>
      <view class="query_btn" :style="'opacity: ' + (currentFocus > 6 ? '1' : '0.5')" @tap="queryPay">查询缴费</view>
    </view>
    <view class="log_box">
      <view v-for="(item, index) in menuList" :key="index" class="log_menu_box" @click="open(index)">
        <view class="log_menu_img">
          <image :src="item.icon" />
        </view>
        <view>{{ item.name }}</view>
      </view>
    </view>

    <view v-if="showKeyBoard" class="friendlyAlert" catchtap="closeKeyBoard" />
    <license-plate v-if="showKeyBoard" ref="keyboard" @close-key-board="closeKeyBoard" @input-province="inputProvince" @input-city="inputCity" @input-license="inputLicense" @backspace="backspace" />
  </view>
</template>
<script>
import licensePlate from '@/components/licensePlate/licensePlate'
const util = require('@/utils/util.js')
import { mmParkingGetParkingPaymentInfo, appSettingList } from '@/api/api1'
export default {
  components: {
    licensePlate
  },
  data() {
    return {
      tabIndex: '0',
      code: [
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        },
        {
          value: ''
        }
      ],
      currentFocus: 0,
      isFocus: false,
      showKeyBoard: false,
      license_plate: '',
      mycarList: [],
      menuList: []
    }
  },
  created() {
    this.init()
  },
  onShow() {
    this.init()
  },
  onReachBottom() { },

  methods: {
    init() {
      const mycar = uni.getStorageSync('MYCAR')
      if (mycar) {
        const mycarList = JSON.parse(mycar)
        this.mycarList = mycarList
      }
      appSettingList({ type: 5, status: true }).then(res => {
        this.menuList = res.data
      })
    },
    closeTip(e) {
      const that = this
      var i = i
      util.Open(
        '删除车牌',
        '该车辆是你绑定车辆，你要删除车牌 ' + that.mycarList[i] + '，同时解绑车牌吗？',
        function() {
          that.mycarList.splice(i, 1)
          wx.setStorageSync('MYCAR', JSON.stringify(that.mycarList))
        },
        function() { },
        true
      )
    },
    queryPay() {
      if (!this.$store.getters.hasLoginAndHasMallInfo) {
        return uni.$u.route('/pages/users/login/index')
      }
      const that = this
      if (that.currentFocus < 7) {
        return
      }
      let plateNo = ''
      for (let i = 0; i < that.currentFocus; i++) {
        plateNo += that.code[i].value
      }
      console.info(plateNo)
      wx.showLoading({
        title: '查询...'
      })
      mmParkingGetParkingPaymentInfo({
        plateNo: plateNo
      }).then(res => {
        wx.hideLoading()
        console.info(res)
        const mycarList = that.mycarList
        if (mycarList && mycarList.indexOf(plateNo) < 0) {
          if (mycarList.length < 4) {
            mycarList.push(plateNo)
            that.mycarList = mycarList
            wx.setStorageSync('MYCAR', JSON.stringify(mycarList))
          }
        }
        uni.$u.route('/pages/parking/parkPayConfirm/index', {
          parkInfo: JSON.stringify(res.data)
        })
      })
    },
    plant(e) {
      const that = this
      var plateNo = e
      const code = []
      for (let i = 0; i < plateNo.length; i++) {
        code[i] = {
          value: plateNo[i]
        }
      }
      if (code.length === 7) {
        code[7] = {
          value: ''
        }
      }
      that.code = code
      that.currentFocus = 7
      wx.showLoading({
        title: '查询...'
      })
      mmParkingGetParkingPaymentInfo({ plateNo: plateNo }).then(res => {
        wx.hideLoading()
        console.info(res)
        uni.$u.route('/pages/parking/parkPayConfirm/index', {
          parkInfo: JSON.stringify(res.data)
        })
      })
    },
    open(i) {
      if (!this.$store.getters.hasLoginAndHasMallInfo && this.menuList[i].link.split('/').splice(-2)[0] !== 'parkStandard') {
        return uni.$u.route('/pages/users/login/index')
      }
      uni.$u.route(this.menuList[i].link)
    },
    // 输入省份
    inputProvince(e) {
      var temp = this.code
      temp[0].value = e
      this.code = temp
      this.currentFocus = 1
    },
    // 输入城市
    inputCity(e) {
      var temp = this.code
      temp[1].value = e
      this.code = temp
      this.currentFocus = 2
    },
    // 输入车牌
    inputLicense(e) {
      var temp = this.code
      var i = this.currentFocus
      temp[i].value = e
      this.code = temp
      this.currentFocus = i + 1
    },
    // 退格
    backspace(i) {
      var temp = this.code
      temp[i].value = ''
      this.code = temp
      this.currentFocus = i
    },
    closeKeyBoard() {
      this.showKeyBoard = false
      this.isFocus = false
    },
    openKeyBoard() {
      this.showKeyBoard = true
      this.isFocus = true
      this.$nextTick(() => {
        this.$refs.keyboard.loadkeyboard(this.currentFocus, this.tabIndex)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.parkCarMm {
  background: #f2f3f7;
  height: calc(100vh);
  width: 100%;
  .top-part {
    background: #fff;
    border-radius: 12rpx;
    padding: 24rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .title {
      font-size: 26rpx;
      font-weight: bold;
      display: flex;
      justify-content: center;
      margin: 24rpx 0;
    }
    .license {
      display: flex;
      justify-content: space-between;
      width: 100%;
      .edit_text {
        height: 72rpx;
        width: 72rpx;
        position: relative;
        border: 1rpx solid #727373;
        border-radius: 12rpx;
        line-height: 72rpx;
        text-align: center;
        font-size: 36rpx;
        .cursor {
          width: 36rpx;
          height: 4rpx;
          background-color: #333333;
          animation: focus 1.2s infinite;
          position: absolute;
          left: 50%;
          margin-left: -18rpx;
          bottom: 14rpx;
        }
      }
      .edit_text:nth-child(2) {
        margin-right: 48rpx;
      }
      .edit_text:nth-child(2)::after {
        content: '';
        position: absolute;
        right: -34rpx;
        top: 45%;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #979797;
      }
      .edit_text:nth-child(8) {
        border: 1px dashed #979797;
      }
    }
    .queit_box {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      margin: 0 auto;
      margin-top: 36rpx;
      .queit {
        display: flex;
        flex-direction: row;
        background-color: #f1f1f1;
        margin: 0 0 12rpx 12rpx;
        text-align: center;
        border-radius: 9rpx;
        padding: 0 12rpx;
        height: 72rpx;
        .plantno {
          line-height: 70rpx;
          letter-spacing: 8rpx;
        }
        .iconfont {
          margin: 15rpx;
          margin-left: 30rpx;
          color: #f1f1f1;
          font-size: 46rpx;
          background-color: #ccc;
          height: 44rpx;
          border-radius: 24rpx;
        }
      }
    }
    .query_btn {
      background-color: #dc7233;
      width: 80%;
      height: 74rpx;
      border-radius: 10rpx;
      line-height: 74rpx;
      text-align: center;
      color: white;
      letter-spacing: 6rpx;
      margin: 0 auto;
      margin-top: 64rpx;
    }
  }

  .log_box {
    padding: 54rpx 40rpx;
    background: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .log_menu_box {
      display: flex;
      flex-flow: column;
      justify-content: center;
      .log_menu_img {
        display: flex;
        justify-content: center;
        image {
          width: 78rpx;
          height: 78rpx;
        }
      }
    }
  }

  .friendlyAlert {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
  }
}
</style>
